<template>
    <!-- 底部粘性 -->
    <van-sticky :offset-bottom="0" position="bottom" z-index="999">
      <div class="box">
        <span><van-icon name="service-o" size="28" /></span>
        <div>立即购买</div>
        <div class="addcart" @click="toCart">加入购物车</div>
      </div>
    </van-sticky>
</template>

<script lang="ts">
  import { defineComponent } from "vue"
  export default defineComponent({
    name:'BottomSelection',
  })
</script>

<script lang="ts" setup>
import {useRouter} from 'vue-router'
const router = useRouter()
// 跳转购物车
function toCart(){
  router.push({
    path:'/shopcart'
  })
}

</script>

<style scoped>

/* 底部粘性布局 */
.box {
  display: flex;
  font-size: 15px;
  text-align: center;
  border: 1px solid #ccc;
  background-color: #fff;
}

.box span {
  flex: 1;
  border-right: 1px solid #ccc;
}

.box span i {
  margin-top: 12px;
}

.box div {
  width: 148.5px;
  height: 52px;
  line-height: 52px;
}

.box .addcart {
  background-color: red;
  color: #fff;
}
</style>